import { Component, OnInit } from '@angular/core';
import { EChartOption } from 'echarts';

// import * as echarts from 'echarts';

@Component({
  selector: 'app-chart01',
  templateUrl: './chart01.component.html',
  styleUrls: ['./chart01.component.scss'],
})
export class Chart01Component implements OnInit {
  chartOption: EChartOption = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'bar',
      },
    ],
  };

  constructor() {}

  ngOnInit(): void {
  //   const ec = echarts as any;
  //   const lineChart = ec.init(document.getElementById('lineChart'));

  //   lineChart.setOption(this.chartOption);
  // //   this.data = {
  //     labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  //     datasets: [
  //         {
  //             label: 'My First dataset',
  //             backgroundColor: '#42A5F5',
  //             borderColor: '#1E88E5',
  //             data: [65, 59, 80, 81, 56, 55, 40]
  //         },
  //         {
  //             label: 'My Second dataset',
  //             backgroundColor: '#9CCC65',
  //             borderColor: '#7CB342',
  //             data: [28, 48, 40, 19, 86, 27, 90]
  //         }
  //     ]
  // }
  }
}
